<template>
  <div>
    <!-- <el-form :model="form" ref="form" label-suffix="：" label-width="120px">
      <el-form-item label="考评等级名称">
        <el-input v-model="form.moralityLevelName" placeholder="请输入考评等级名称" />
      </el-form-item>
      <el-form-item label="最大分值">
        <el-input type="number" v-model.number="form.maxScore" />
      </el-form-item>
      <el-form-item label="最小分值">
        <el-input type="number" v-model.number="form.minScore" />
      </el-form-item>
      <el-form-item label="是否限制人数">
        <el-radio-group v-model="form.peopleLimit" size="small">
          <el-radio-button :label="1">是</el-radio-button>
          <el-radio-button :label="0">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="科室考评环节人数比上限" v-if="form.peopleLimit">
        <el-input type="number" v-model="form.deptPercent" />
      </el-form-item>
      <el-form-item label="党支部考评环节人数比上限" v-if="form.peopleLimit">
        <el-input type="number" v-model="form.branchPercent" />
      </el-form-item>
      <el-form-item label="考评委员会人数比上限" v-if="form.peopleLimit">
        <el-input type="number" v-model="form.committeePercent" />
      </el-form-item>
    </el-form>-->
    <h2>考评方案分数：{{ grade }}</h2>
    <el-row class="mb20" v-for="(item,index) in checkArr" :key="index">
      <el-col style="display: flex;line-height: 36px">
        <el-checkbox
          v-model="item.check"
          @change="e => handleChange(e, index)"
          class="fl"
        >{{ item.moralityLevelName }}</el-checkbox>
        <p class="ml10">
          最大值
          <el-input style="width: 80px" type="number" v-model.number="item.maxScore" />
        </p>
        <p class="ml10">
          最小值
          <el-input style="width: 80px" type="number" v-model.number="item.minScore" />
        </p>
        <p class="ml10">
          是否限制人数
          <el-radio-group v-model="item.peopleLimit" size="small">
            <el-radio-button :label="1">是</el-radio-button>
            <el-radio-button :label="0">否</el-radio-button>
          </el-radio-group>
        </p>
      </el-col>
      <el-col style="display: flex" v-if="item.peopleLimit">
        <p>
          科室考评环节人数比上限
          <el-input class="width80" type="number" v-model="item.deptPercent" />
        </p>
        <p>
          党支部考评环节人数比上限
          <el-input class="width80" type="number" v-model="item.branchPercent" />
        </p>
        <p>
          考评委员会人数比上限
          <el-input class="width80" type="number" v-model="item.committeePercent" />
        </p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { levelAll } from '@/api/morality'
import { getSession, setSession } from '@/utils/util'
export default {
  data() {
    return {
      form: {},
      checkArr: [],
      type: this.$route.params.type || getSession('moralityType'),
      grade: 0
    }
  },
  async mounted() {
    if (this.type) {
      setSession('moralityType', this.type)
    } else {
      const res = await levelAll()
      console.log('mounted level', res)

      if (res.state === '000000') {
        let arr = res.data
        arr.map(v => (v.peopleLimit = 0))
        this.checkArr = [...arr]
      }
    }
  },
  methods: {
    handleChange(e, index) {
      console.log('change', e, index, this.checkArr)
      this.$set(this.checkArr[index], 'check', e)
      this.checkArr.splice()
    },
    setArr(arr) {
      // console.log('gradeComp', arr)
      this.$nextTick(() => {
        this.$set(this, 'checkArr', arr)
        this.checkArr.map(v => (v.check = true))
      })
      // console.log('checkArr', this.checkArr)
    },
    computeGrade(arr) {
      this.grade = 0
      console.log('计算分数 arr', arr)
      arr.map(v => {
        this.grade += v.itemStandard
      })
    },
    postData() {
      let arr = []
      this.checkArr.map(v => {
        if (v.check) {
          arr.push(v)
        }
      })
      //   this.$refs.form.validate(valid => {
      if (arr.length > 0) {
        console.log('form', this.form)
        this.$emit('postData', true, arr, 5)
        return false
      } else {
        this.$emit('notSubmit', 5)
      }
      //   })
    }
  }
}
</script>

<style scoped>
.width80 {
  width: 80px;
}
</style>
